<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>题目编辑</title>
    <link rel="icon" href="image/网页图标.png" type="image/x-icon">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/top.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="12%">
            <top @getuser="user">
            </top>
        </el-header>
        <el-main>
            <el-row class="c900" style="height: calc(115% - 90px); background-color: #eee; width:1500px">
                <el-col span="8" class="h100 flex" style="flex-direction: column;align-items: stretch; border-right: 1px #bbb solid">
                    <h3 class="flex">
                        筛选题目
                        <el-button @click="open" style="padding: 3px 0" type="text">随机试卷</el-button>
                    </h3>
                    <el-form label-position="left">
                        <el-select @change="reQuery" v-model="questionWhere.type" placeholder="题型" style="width: 100%">
                            <el-option label="填空题" value="填空题"></el-option>
                            <el-option label="单选题" value="单选题"></el-option>
                            <el-option label="多选题" value="多选题"></el-option>
                            <el-option label="判断题" value="判断题"></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="课程章节:" label-width="80px">
                            <el-select @change="reQuery" v-model="questionWhere.course" placeholder="课程章节" style="width: 100%">
                                <el-option v-for="item in type" :label="item.tname" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div id="qs" style="overflow-y: auto; flex-grow: 1;padding: 10px;margin-block: 10px">
                        <el-card v-infinite-scroll="queryNext" infinite-scroll-delay="500">
                            <div v-for="q in questionPage.records" class="flex">
                                <div>
                                    <el-tag>{{q.type}}</el-tag>
                                    <span v-if="q.content.length>15">
                                    {{q.content.substring(0,15)}}...
                                </span>
                                    <span v-else>
                                    {{q.content}}
                                </span>
                                </div>
                                <span><input type="checkbox" :checked="selectedQuestion.filter(s=>s.id == q.id).length > 0?true:false" :value="q.id" @change="choose($event,q)"></span>
                            </div>
                        </el-card>
                    </div>
                </el-col>


                <el-col span="16" class="h100 flex" style="flex-direction: column;align-items: stretch;padding-inline: 10px">
                    <h3 class="flex">
                        考卷信息
                        <el-button @click="add" style="padding: 3px 0" type="text">保存</el-button>
                    </h3>
                    <el-form :inline="true" label-position="left" style="flex:none;">
                        <el-form-item label="标题:" label-width="80px">
                            <el-input placeholder="请输入标题" v-model="paper.title"></el-input>
                        </el-form-item>
                        <el-form-item label="总分:" label-width="80px">
                            <el-input disabled v-model="paper.scoreTotal"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form :inline="true" label-position="left" style="flex:none;">
                        <el-form-item label="时长:" label-width="80px">
                            <el-input placeholder="请输入考试用时" v-model="paper.time"></el-input>
                        </el-form-item>
                        <el-form-item label="考试时间:" label-width="80px">
                            <el-date-picker @change="gettime" value-format="yyyy-MM-dd hh:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 206px" v-model="paper.begin">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="至:" label-width="80px">
                            <el-date-picker @change="gettime" value-format="yyyy-MM-dd hh:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 206px" v-model="paper.end">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-form :inline="true" label-position="left" style="flex:none; margin-bottom: 20px">
                        <el-form-item label="填空题:" label-width="80px">
                            <el-input v-model="mark.one" @blur="scoreSum"></el-input>
                        </el-form-item>
                        <el-form-item label="单选题:" label-width="80px">
                            <el-input v-model="mark.two" @blur="scoreSum"></el-input>
                        </el-form-item>
                        <el-form-item label="多选题:" label-width="80px">
                            <el-input v-model="mark.three" @blur="scoreSum"></el-input>
                        </el-form-item>
                        <el-form-item label="判断题:" label-width="80px">
                            <el-input v-model="mark.four" @blur="scoreSum"></el-input>
                        </el-form-item>
                    </el-form>


                    <el-card id="test" style="flex: auto;padding-block: 5px; font-size: .7em;margin-bottom: 10px">
                        <div style="overflow: auto">
                            <div class="flex" style="padding-inline: 10px">
                                <h3>Java基础测试题</h3>
                            </div>
                            <el-card style="font-size: 15px">
                                <div slot="header">
                                    填空题（每空{{mark.one === '' ? 0 : mark.one}}分）
                                </div>
                                <ol>
                                    <li v-for="q in selectedQuestion.filter(a=>a.type=='填空题')">{{q.content}}</li>
                                </ol>
                            </el-card>
                            <el-card style="font-size: 15px">
                                <div slot="header">
                                    单选题（每题{{mark.two === '' ? 0 : mark.two}}分）
                                </div>
                                <ol>
                                    <li v-for="q in selectedQuestion.filter(a=>a.type=='单选题')">
                                        {{q.content}}
                                        <ol type="A">
                                            <li v-for="a in q.items.split(';')"><input type="radio" :name="q.id">{{a}}</li>
                                        </ol>
                                    </li>
                                </ol>
                            </el-card>
                            <el-card style="font-size: 15px">
                                <div slot="header">
                                    多选题（每题{{mark.three === '' ? 0 : mark.three}}分）
                                </div>
                                <ol>
                                    <li v-for="q in selectedQuestion.filter(a=>a.type=='多选题')">
                                        {{q.content}}
                                        <ol type="A">
                                            <li v-for="a in q.items.split(';')"><input type="checkbox">{{a}}</li>
                                        </ol>
                                    </li>
                                </ol>
                            </el-card>
                            <el-card style="font-size: 15px">

                                <div slot="header">
                                    判断题（每题{{mark.four === '' ? 0 : mark.four}}分）
                                </div>
                                <ol>
                                    <li class="flex"v-for="q in selectedQuestion.filter(a=>a.type=='判断题')">
                                        {{q.content}}
                                    </li>
                                </ol>
                            </el-card>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

<!--    选择随机题目弹框-->
    <el-dialog title="随机题目" :visible.sync="qus">
        <el-form>
            <el-form-item :label-width="100">
                <el-select @change="get" v-model="randomType" placeholder="课程章节" style="width: 100%">
                    <el-option v-for="item in type" :label="item.tname" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="填空题" :label-width="100">
                <el-input-number v-model="num.one" :min="0" :max="questions.one.length" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="单选题" :label-width="100">
                <el-input-number v-model="num.two" :min="0" :max="questions.two.length" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="多选题" :label-width="100">
                <el-input-number v-model="num.three" :min="0" :max="questions.three.length" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="判断题" :label-width="100">
                <el-input-number v-model="num.four" :min="0" :max="questions.four.length" label="描述文字"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="qus = false">取 消</el-button>
            <el-button type="primary" @click="getquestion">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            uid: null,
            showEditor:false,
            questionWhere: {type:"", course:""},
            questionPage: {current:1, size:20, records:[]},
            selectedQuestion:[],
            paper:{title:"", scoreTotal:0, time:0, begin:'', end:''},
            qus: false,
            num: {one:0, two:0, three:0, four:0},
            question:[],
            questions:{one:[], two:[], three:[], four:[]},
            type: [],
            randomType: '',      //随机题目类别
            mark: {one: 0, two: 0, three: 0, four: 0}
        },
        created(){
            this.getType();
        },
        watch: {
            uid(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.query();
                }
            },
            selectedQuestion(newValue, oldValue){
                if (newValue !== oldValue) {
                    this.scoreSum();
                }
            }
        },
        methods:{
            //组件自定义方法
            user(info) {
                this.uid = info.id;
            },
            query(){
                axios.get("cloud-other/question/query",{
                    params:{
                        page: this.questionPage.current,
                        size: this.questionPage.size,
                        type: this.questionWhere.type,
                        course: this.questionWhere.course,
                    }
                }).then(res=>{
                    if(this.questionPage.current == 1){
                        this.questionPage = res.data;
                    }else{
                        let oldRecords = this.questionPage.records;
                        this.questionPage = res.data;
                        oldRecords = oldRecords.concat(this.questionPage.records);
                        this.questionPage.records = oldRecords;
                    }
                })
            },
            queryNext(){
                if(this.questionPage.pages && this.questionPage.current < this.questionPage.pages){
                    this.questionPage.current++;
                    this.query();
                }
            },
            choose(event, question){
                if(event.target.checked){
                    this.selectedQuestion.push(question);
                }else{
                    this.selectedQuestion = this.selectedQuestion.filter(q=>q.id != question.id);
                }

                //点击选择题目后，统计总分
                this.scoreSum();
            },
            reQuery(){
                this.questionPage.current = 1;
                this.questionPage.records = [];
                this.query();
            },
            add(){
                this.paper.details = this.selectedQuestion.map(q=>{
                    return {qid : q.id}
                });
                this.paper.tk = this.mark.one;
                this.paper.dk = this.mark.two;
                this.paper.dxs = this.mark.three;
                this.paper.pd = this.mark.four;
                this.paper.createUid = this.uid;
                axios.post("cloud-other/paper/add", this.paper).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                    }else {
                        let a = "";
                        res.data.data.forEach(err=>{
                            a += err.defaultMessage;
                        });
                        this.$alert(a);
                    }
                });
            },
            open(){
                this.qus = true;
                this.get();
            },
            //所有题目
            get(){
                //获取全部题目
                axios.get("cloud-other/question/get?tid=" + this.randomType).then(res=>{
                    //统计数量
                    this.question = res.data.data;
                    this.questions.one = [];
                    this.questions.two = [];
                    this.questions.three = [];
                    this.questions.four = [];
                    this.num.one = 0;
                    this.num.two = 0;
                    this.num.three = 0;
                    this.num.four = 0;
                    for (let i = 0; i < this.question.length; i++) {
                        if(this.question[i].type == "填空题"){
                            this.questions.one.push(this.question[i]);
                        }else if(this.question[i].type == "单选题"){
                            this.questions.two.push(this.question[i]);
                        }else if(this.question[i].type == "多选题"){
                            this.questions.three.push(this.question[i]);
                        }else if(this.question[i].type == "判断题"){
                            this.questions.four.push(this.question[i]);
                        }
                    }
                });
            },
            //给题目
            getquestion(){
                this.selectedQuestion = [];
                //分配题目
                var num = this.getnum(0, this.questions.one.length - 1, this.num.one);
                if(num === -1){
                    return;
                }
                num.forEach(a=>{
                    this.selectedQuestion.push(this.questions.one[a]);
                });
                num = this.getnum(0, this.questions.two.length - 1, this.num.two);
                if(num === -1){
                    return;
                }
                num.forEach(a=>{
                    this.selectedQuestion.push(this.questions.two[a]);
                });
                num = this.getnum(0, this.questions.three.length - 1, this.num.three);
                if(num === -1){
                    return;
                }
                num.forEach(a=>{
                    this.selectedQuestion.push(this.questions.three[a]);
                });
                num = this.getnum(0, this.questions.four.length - 1, this.num.four);
                if(num === -1){
                    return;
                }
                num.forEach(a=>{
                    this.selectedQuestion.push(this.questions.four[a]);
                });
            },
            //随机数
            getnum(a, b, n){
                if (n > (b - a + 1)) {
                    this.$alert("数量太大，请重新输入生成!");
                    return -1;
                }
                let set = new Set();
                while (set.size < n) {
                    let num = Math.floor(Math.random() * (b - a + 1)) + a;
                    set.add(num);
                }
                // 将 Set 转换为数组并返回
                return Array.from(set);
            },
            //获取全部类别
            getType(){
                axios.get("cloud-other/type/getType").then(res=>{
                    if(res.data.code == 1){
                        this.type = res.data.data;
                    }
                });
            },
            //获取总分
            scoreSum(){
                //点击选择题目后，统计总分
                let score = 0;
                this.selectedQuestion.forEach(q=>{
                    if(q.type == "判断题"){
                        score+=(+this.mark.four || 0);
                    }else if(q.type == "多选题"){
                        score+=(+this.mark.three || 0);
                    }else if(q.type == "单选题"){
                        score+=(+this.mark.two || 0);
                    }else {
                        score += q.content.split(/[^_]+/).filter(s=>/^\s*$/.test(s) == false).length * (this.mark.one || 0);
                    }
                });
                this.paper.scoreTotal = score;
            },
            //获取时间
            gettime(){
                const begin = this.paper.begin;
                const end = this.paper.end;

                // 将字符串解析为 Date 对象
                const startDate = new Date(begin.replace(/-/g, '/')); // 有些浏览器可能不支持 YYYY-MM-DD 格式，所以替换为 YYYY/MM/DD
                const endDate = new Date(end.replace(/-/g, '/'));

                // 检查开始时间是否大于结束时间
                if (startDate > endDate) {
                    this.$alert('开始时间不能大于结束时间');
                    return; // 或者返回一个错误提示
                }
            }
        }
    })
</script>
<style>
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    li>ol{
        margin-bottom: 20px;
    }
    li{
        margin-block: 10px;
        line-height: 2rem;
    }
    .fill{
        border: 0px;
        border-bottom: 1px #000 solid;
        margin-inline: 3px;
        padding: 5px;
        text-align: center;
        color: #0a6999;
    }
    .el-form-item{
        margin-block: 10px 0px;
        padding-inline: 10px;
    }
    .el-switch{
        align-self: center
    }
    #qs .el-card__body{
        padding: 10px;
        font-size: .8em;
    }
    #test .el-card__body{
        padding: 0px;
        height: 100%;
        overflow-y: auto;
    }
    .el-col h3{
        margin: 10px;
    }
    html, body, #app {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    .el-container{
        width: 100%;
        height: 100%;
    }
    .el-header{
        width: 100%;
        padding: 0%;
    }

    /* 卡片 */
    .c1{
        width: 100%;
        height: 100%;
        font-size: 35px;
    }

    /* 弹出 */
    .d1{
        width: 200px;
        height: 400px;
        position: absolute;
        z-index: 100;
        left: 10%;
    }

    /* 浮动 */
    .f{
        float: left;
    }
    .r{
        float: right;
    }

    .i1{
        position: relative;
        top: -15px;
    }

    .p1{
        margin: 8px 10px 0 10px;
        text-decoration: none;
        color: #333333;
    }
    .user{
        float: right;
        position: relative;
        left: -40px;
        top: 15px;
    }
</style>

</html>